<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataPzzh } from "@/api/search";
import { addOrUpdatePzzh } from "@/api/addOrUpdate";
import { zhList } from "@/data/pzzh"

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();
const editorRef5 = shallowRef();
const editorRef6 = shallowRef();
const editorRef7 = shallowRef();

const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};
const toolbarConfig5 = {};
const toolbarConfig6 = {};
const toolbarConfig7 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");
const mode5 = ref("行动要点-主要行动的方法措施");
const mode6 = ref("default");
const mode7 = ref("default");

// 加载html
const initHtml = () => {
  searchDataPzzh({ m: "行动要点-主要行动的方法措施" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "指挥所开设的方法措施")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "临战筹划的方法措施")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "报知手段优化的方法措施")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "人防工程转换的方法措施")?.v || "";
    valueHtml4.value = data.find((x) => x.k === "信息系统防护的方法措施")?.v || "";
    valueHtml5.value = data.find((x) => x.k === "专业队伍扩编的方法措施")?.v || "";
    valueHtml6.value = data.find((x) => x.k === "综合保障准备的方法措施")?.v || "";
    valueHtml7.value = data.find((x) => x.k === "战备动员的方法措施")?.v || "";

  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};
const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};
const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};
const handleCreated5 = (editor) => {
  editorRef5.value = editor; // 记录 editor 实例，重要！
};
const handleCreated6 = (editor) => {
  editorRef6.value = editor; // 记录 editor 实例，重要！
};
const handleCreated7 = (editor) => {
  editorRef7.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "组织方法：按照市人民防空指挥部的整体筹划和统一部署组织实施，采取逐级落实的方式，由县（区）人民防空指挥部各负其责，完成本级指挥所工程的平战转换和人员编组；采取上下结合方式，完成指挥通信手段平战转换，确保指挥信息传输畅通。<br/>开设要求：战时市、县（区）两级均应开设人防基本指挥所、预备指挥所、机动指挥所和地面指挥中心，各级人防指挥所（地面指挥中心）实现与省、市、县三级互联互通。"
);

const valueHtml1 = ref(
  "组织方法：市、县（区）两级人防指挥部应充分利用各种空情预警、指挥信息系统，采取上下结合、军地结合，线上线下结合，集中组织、统一指挥的方式组织实施。<br/>筹划内容：①认真搜集掌握分析判断敌情，力求尽早判明敌可能开始空袭的时间、地点、方式、兵力和主要企图，并及时发出预先号令；②正确理解上级意图和防空袭作战任务，及时定下决心，修订防空袭方案；③按级分类筹划好指挥所、专业力量、人员防护、综合保障、战备动员等工作。"
);
const valueHtml2 = ref(
  "组织方法：由市人防指挥信息保障中心牵头，县（区）两级人防部门应采取统筹计划、统一指挥，按行政区划分级、分片、分单位包干落实的方式组织实施。<br/>优化内容：①按计划对警报终端检修，检查核对警报设点单位联系人通联方式，配齐警报器设备，增强警报器控制，完善有线、无线、自控三种手段；②适时通知广电、交通、电力、水务、燃气、重要目标单位、各级警报设点单位，组建完善警报专业队和警报应急保障组，确保能够适时依令发放空袭警报。"
);
const valueHtml3 = ref(
  "组织方法：按照人防工程平战转换方案，由县（区）人防部门牵头统一筹划、组织、指导和验收人防工程的平战转换工作，由人防工程的建设单位或管理使用单位组织具体的工程施工，由相关街道指定人员负责人防工程转换的协调工作。<br/>转换内容：主要有出入口、风管、水管、电缆等相关项目的安装、拆除、封堵等。"
);
const valueHtml4 = ref(
  "(1)电子防护方法措施：①区分优先等级，优先保障指挥信息网络、重要部门信息网络；②采取伪装、变形、遮障、烟幕和设置假信号发射源等方法手段，有效预防敌电子侦察；③定时组织无线电网静默，严格控制雷达开机和大功率电台发信时间，减小卫星过顶时的电磁辐射，降低敌卫星侦察效果；④备份各种重要通信设施和电源设备，确保在网络遭破坏时，保障指挥通信畅通。<br/>(2)网络防护方法措施：①实行内网与外网独立建设，严格物理隔离；②平时和战时均按照“一备一用”的原则进行储备，准备多种预案抢修恢复；③战时采取加固、伪装、遮障、电子监测等方式进行防护，对人防专用光缆线路和交换设备进行重点监测防护；④突出保密防护和监测维护，预防木马病毒入侵。<br/>(3)电磁频谱管理方法措施：①未经批准，严禁建立通信机站和使用无线通信设备；②建立战时电磁环境监测网，主要城区固定监测站、机动监测站联网，对区域内军警、人防使用的电磁频段实施全时监测和保护；③加强对敌特电台及干扰源等无线通信设备的频率侦察、清除；④采取技术手段对敌实施无线电干扰。"
);
const valueHtml5 = ref(
  "组织方法：按照市、县（区）两级各行业领域、单位条块结合，统一组织和分区负责的原则，平战结合，专业对口，结合各县（区）实际按需组建，按系统、按单位、成建制组建各类专业队伍。<br/>扩编任务：各专业队伍扩编任务按本计划第五节“相关保障”中明确的专业力量扩编保障要点执行；组织工作按本计划第六节“组织指挥”中明确的职责分工执行。"
);
const valueHtml6 = ref("按本计划第五节“相关保障”中明确的保障要点执行。");
const valueHtml7 = ref(
  "组织方法：县（区）两级人防主管部门按照市人防指挥部统一计划部署，按行政区划分级组织实施，市级战备动员指挥机构主要负责制定战备动员的政策法规，搞好整体宣传动员。县（区）级战备动员指挥机构主要负责解读好战备动员的政策法规，落实市级动员部署要求，同时，重点指导街道、社区居民搞好现地动员，确保战备动员全覆盖、深入人心。<br/>动员内容：①要根据上级指示精神，深入开展防空袭动员，适时将平时体制转为战时体制；②按计划动员补充、扩编人防专业队伍；③认真研究分析社情、舆情和民众的思想状况，针对空袭中可能出现的情况提出鲜明的工作指导方针和动员内容，激励民众夺取防空袭斗争的胜利信心。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdatePzzh({
      m: "行动要点-主要行动的方法措施",
      data: [
        {
          k: "指挥所开设的方法措施",
          v: valueHtml.value,
        },
        {
          k: "临战筹划的方法措施",
          v: valueHtml1.value,
        },
        {
          k: "报知手段优化的方法措施",
          v: valueHtml2.value,
        },
        {
          k: "人防工程转换的方法措施",
          v: valueHtml3.value,
        },
        {
          k: "信息系统防护的方法措施",
          v: valueHtml4.value,
        },
        {
          k: "专业队伍扩编的方法措施",
          v: valueHtml5.value,
        },
        {
          k: "综合保障准备的方法措施",
          v: valueHtml6.value,
        },
        {
          k: "战备动员的方法措施",
          v: valueHtml7.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;
  const editor5 = editorRef5.value;
  const editor6 = editorRef6.value;
  const editor7 = editorRef7.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;
  if (!editor5) return;
  if (!editor6) return;
  if (!editor7) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
  editor5.destroy();
  editor6.destroy();
  editor7.destroy();
});

// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

const tableData = ref([
  {
    c1: 1,
    c2: "平时出入口战时封堵",
  },
  {
    c1: 2,
    c2: "平时出入口战时砌筑",
  },
]);
</script>
<template>
  <div class="">
    <FirstTitle name="指挥所开设的方法措施" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="临战筹划的方法措施" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="报知手段优化的方法措施" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="人防工程转换的方法措施" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>
    <div class="top-15">人防工程转换项目：</div>
    <div class="top-15 text-center">{{ city }}人防工程转换项目参照表</div>
    <el-table
      :header-cell-style="headerCellStyle"
      :cell-style="cellStyle"
      class="top-15"
      id="tableDwtx"
      :data="zhList"
      border
    >
      <el-table-column prop="c1" label="序号" align="center" />
      <el-table-column prop="c2" label="项目" align="center" />
    </el-table>

    <FirstTitle name="信息系统防护的方法措施" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>

    <FirstTitle name="专业队伍扩编的方法措施" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef5"
        :defaultConfig="toolbarConfig5"
        :mode="mode5"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml5"
        :defaultConfig="editorConfig"
        :mode="mode5"
        @onCreated="handleCreated5"
      />
    </div>

    <FirstTitle name="综合保障准备的方法措施" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef6"
        :defaultConfig="toolbarConfig6"
        :mode="mode6"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml6"
        :defaultConfig="editorConfig"
        :mode="mode6"
        @onCreated="handleCreated6"
      />
    </div>

    <FirstTitle name="战备动员的方法措施" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef7"
        :defaultConfig="toolbarConfig7"
        :mode="mode7"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml7"
        :defaultConfig="editorConfig"
        :mode="mode7"
        @onCreated="handleCreated7"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>